<!DOCTYPE html>
<html>
<!-- removed for now, causes problems in Firefox: manifest="svg-editor.manifest" -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>


<link href="jquery/jquery-ui.min.css" rel="stylesheet">
<script src="jquery/jquery3.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>

<link href="editor/editor.css" rel="stylesheet">



</head>

<body>

<div id="rulers">
	<div id="ruler_corner"></div>
	<div id="ruler_x">
		<div>
			<canvas id="ruler_canvas_x" height="15"></canvas>
		</div>
	</div>
  
	<div id="ruler_y">
		<div>
			<canvas id="ruler_canvas_y" width="15"></canvas>
		</div>
	</div>
  
</div>

<div id="workarea">
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
<div id="svgcanvas" style="position:relative">

</div>
</div>


</body>

</html>

<script>

    
    
var g_winWidth = $(window).width();
var g_winHeight = $(window).height();

var canvas_x = $( "#ruler_canvas_x" );
var canvas_y = $("#ruler_canvas_y");

var TICK_WIDTH = 10 ;
var TICKS_LINEWIDTH = 0.5 ;
var TICKS_COLOR = 'navy';

var HORIZONTAL_TICK_SPACING = 10 ;
var NUM_HORIZONTAL_TICKS = canvas_x.width()  / HORIZONTAL_TICK_SPACING;


var VERTICAL_TICK_SPACING = 10 ;

var NUM_VERTICAL_TICKS   = canvas_x.height() / VERTICAL_TICK_SPACING;

function drawHorizontalAxisTicks() {
  var contextx = canvas_x[0].getContext("2d");  
  var deltaY;    
  contextx.save();  
  contextx.fillStyle = "rgba(100, 140, 230, 0.8)";  
  contextx.lineWidth = 0.5;      
  contextx.strokeStyle = "darkred";  
  contextx.translate(0, 0);
    
   for (var i=1; i < NUM_HORIZONTAL_TICKS; ++i) {
      contextx.beginPath();
 
      if (i % 5 === 0) 
        deltaY = TICK_WIDTH;
      else             
        deltaY = TICK_WIDTH/2;
               
      contextx.moveTo(i * HORIZONTAL_TICK_SPACING, 0);
 
      contextx.lineTo(i * HORIZONTAL_TICK_SPACING, deltaY);
 
      contextx.stroke();
   }
}

drawHorizontalAxisTicks();  
	  
    
    
</script>    